<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>btc</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/set.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css"/>
    <style>
        body {
            width: 100%;
            height: auto;
            overflow: hidden;
            background-color: #f7f7f7;
        }

        body,
        html {
            overflow-x: hidden;
        }

        .content {
            background-color: #FFFFFF;
        }

        .aui-tab-item {
            color: #999999;
        }

        .btc_swiper {
            width: 95%;
            height: auto;
            min-height: 24rem;
            background-color: #FFFFFF;
        }

        .btc_swiper .aui-tab-item .slide-title {
            width: 100%;
            border-bottom: 1px solid #E6E6E6;
        }

        .btc_swiper .aui-tab-item li {
            width: 100%;
            height: 3rem;
            /*line-height: 66px;*/
            color: #000000;
            border-bottom: 1px solid #E6E6E6;
            position: relative;
        }

        .jys-nameul .jys-nameli span,
        .jg-nameul .jg-nameli span,
        .zf-nameul .zf-nameli span {
            display: block;
            height: 0.9rem;
            color: #999999;
            /*line-height: 23px;*/
        }

        .jg-nameul .jg-nameli span {
            color: #000000;
        }

        .jys-nameli,
        .jg-nameli {
            line-height: 3rem;
        }

        .jg-nameli .jg-huilv {
            text-align: left;
        }

        .jys-nameul .jys-nameli .jys-name-img {
            width: 22%;
            position: relative;
            margin: 0 auto;
            padding-top: 15px;
        }

        .sz-name,
        .sz-nameul {
            /*width: 5.6rem !important;*/
        }

        .sz-nameli {
            line-height: 3rem;
        }

        li.jysNameli {
            line-height: 3rem;
        }

        span.zf-huilv {
            color: #999999 !important;
            /*text-align: left;*/
        }

        .vision {
            display: none !important;
        }

        .zf-nameli {
            overflow: hidden;
        }
    </style>
</head>

<body>

<!--列表信息 Start-->
<div class="content">
    <section class="aui-refresh-content">
        <div class="aui-content">
            <ul id="dem">

                <div class="swiper-container btc_swiper" id="wrap">
                    <div class="swiper-wrapper" id="">

                        <div class="aui-tab-item" style="width: 4rem;">
                            <div class="slide-title">交易所</div>
                            <ul class="jys-nameul" id="item-jysNames">
                                <!---->

                            </ul>
                        </div>
                        <div class="aui-tab-item" style="width: 2.45rem;backface-visibility: red;">
                            <div class="slide-title" style="height: 2.25rem !important;line-height: 2.25rem;"></div>
                            <ul class="jys-nameul" id="item-jysmargin1">

                            </ul>
                        </div>

                        <div class="aui-tab-item" style="width:5.9rem;">
                            <div class="slide-title">价格</div>
                            <ul class="jg-nameul" id="item-jysPrices">
                                <!---->

                            </ul>
                        </div>
                        <div class="swiper-slide aui-tab-item" style="width: 5.15rem !important;">
                            <div class="slide-title sz-name">涨幅</div>
                            <ul class="zf-nameul" id="item-jysRanges">
                                <!---->

                            </ul>
                        </div>
                    </div>
                    <div style="height: 2.5rem; text-align: center;line-height: 2.5rem;color: #ccc;" id="tishi">正在加载中
                    </div>
                    <div style="height: 2.5rem;"></div>
                </div>

            </ul>
        </div>

    </section>
    <!--市值 Tab Block-->

</div>
<!--列表信息 end-->

</body>
<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/aui-pull-refresh.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
  //涨幅
  var swiper = new Swiper('.btc_swiper', {
    slidesPerView: 3,
    spaceBetween: 0,
    freeMode: true,
    pagination: {
      //      el: '.swiper-pagination',
      clickable: true,
    },
  });

  var mindex = 0;
  var pullRefresh = new auiPullToRefresh({
    container: document.querySelector('.aui-refresh-content'),
    triggerDistance: 100
  }, function (ret) {
    if (ret.status == "success") {
      setTimeout(function () {
        $('#item-jysNames').html('');
        $('#item-jysmargin1').html('');
        $('#item-jysPrices').html('');
        $('#item-jysRanges').html('');
        mindex = 0;
        ajax_fordata();
        pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
      }, 1500)
    } else {
      var html = '<span>没有更多</span>'
    }
  })


  //下拉刷新前，获取后台
  $(function () {
    ajax_fordata();
  });

  function ajax_fordata() {
    var coinArray = [{
      'symbol': "BTC",
      'exchangeId': "0"
    }]

    var si = setInterval(function () {
      if (window.parent.headers != {}) {
        clearInterval(si)
        $('#tishi').text("正在加载中")
        $.ajax({
          url: 'http://api.kktoken.io:7001/coin/findExchangeInfo',
          headers: window.parent.headers,
          type: 'GET',
          data: {
            coinArray: JSON.stringify(coinArray)
          },
          contentType: "application/json",
          dataType: 'json',
          success: function (result) {
            if(result.code == 0){
              addBox(result);
              localStorage.setItem("dataList", JSON.stringify(result.result))
            }
          }
        });
      }
    }, 100)


  }

  function addBox(result) {
    $('#tishi').text("已没有更多")
    $.each(result.result, function (index, obj) {
      var jysName = obj['exchangeId'];
      var jysPriceNew = obj['priceCNY'];
      var jysPriceRng = obj['roseCny'];
      //	判断exchangeId进行对应
      var x =getjysName(jysName);
      var jysRange = document.getElementsByClassName("jysRange");
      //jysPriceRng = (parseFloat(jysPriceRng).toFixed(3)*100)/100;
      //最新价左至右取9位
      if (jysPriceNew > 0.0000001) {
        jysPriceNew = jysPriceNew.substring(0, 9);
      }

      //涨幅 百分小数取一位预处理
      jysPriceRng = changeTwoDecimal_f(jysPriceRng);
      //数值前添加符号表示涨+跌-
      if (jysPriceRng > 0) {
        jysPriceRng = '+' + jysPriceRng;
      }

      $('#item-jysNames').append('<li class="jysNameli" onclick="todetail(' + index + ')"><span class="jys-name-title">' + x + '</span></li>');
      $('#item-jysmargin1').append('<li class="jysmargin1li" onclick="todetail(' + index + ')"><span class="jg-huilv"></span></li>');

      $('#item-jysPrices').append('<li class="jg-nameli" onclick="todetail(' + index + ')">' + '<span class="jg-huilv">￥' + jysPriceNew + '</span>' +
        '</li>');
      $('#item-jysRanges').append('<li class="zf-nameli" onclick="todetail(' + index + ')">' + '<span class="zf-zhishu">' + jysPriceRng + '%</span>' + '<span class="zf-huilv">￥' + obj['changeCnyPrice'] + '</span>' +
        '</li>');


      //数值判断涨跌后添加颜色
      if (jysPriceRng > 0) {
        $('.zf-zhishu:eq(' + (index + mindex) + ')').css('color', getRiseColor());
      } else if (jysPriceRng < 0) {
        $('.zf-zhishu:eq(' + (index + mindex) + ')').css('color', getFallColor());
      } else {
        $('.zf-zhishu:eq(' + (index + mindex) + ')').css('color', '#000000');
      }
    })

    mindex += result.result.length
  }

</script>

</html>
